<template>
    <div style="margin-top: 30px;width: 1360px">

        <div>
            <el-row>
                <el-col :span="24">

                    <el-button
                            type="primary"
                            @click="goBack()">返回
                    </el-button>
                    <span style="font-size: 15px;margin-left: 10px;">商家入驻审核</span>
                </el-col>
            </el-row>
            <br>
            <br>
            <el-form :model="form"
                     style="display:inline-block;vertical-align: top;margin-right: 80px"
                     label-width="150px">
                <el-form-item label="商家名称：">
                     <!-- <el-input style="width: 300px;" v-model="form.storeName" :maxlength="50"></el-input> -->
                     <span>{{ form.storeName }}</span>
                </el-form-item>
                <el-form-item label="法人姓名：">
                     <span>{{ yibaoInfo.contactor }}</span>
                </el-form-item>
                 <el-form-item label="法人身份证：">
                     <span>{{ yibaoInfo.idCard }}</span>
                </el-form-item>
                <el-form-item label="联系方式：">
                     <span>{{ yibaoInfo.bindMobile }}</span>
                </el-form-item>
                <el-form-item label="门店电话：">
                    <!-- <el-input style="width: 300px;" v-model="form.storePhone" :maxlength="50"></el-input> -->
                    <span>{{ form.storePhone }}</span>
                </el-form-item>
                <el-form-item label="门店地址：">
                    <!-- <el-input style="width: 300px;" v-model="form.storeAddress"  type="textarea" :rows="3" :disabled="true"></el-input>
                    <el-button type="primary" @click="selectAddress()" v-if="form.actStat==3">重新选取地址</el-button> -->
                    <span>{{ form.storeAddress }}</span>
                </el-form-item>
                <el-form-item label="商家营业时间：" label-width="150px" style="margin-top: 25px;">          
                           <!-- <el-time-select
                            placeholder="起始时间"
                            v-model="startTime"
                            :picker-options="{
                              start: '00:00',
                              step: '00:15',
                              end: '23:45'
                            }">
                          </el-time-select>
                          <el-time-select
                            placeholder="结束时间"
                            v-model="endTime"
                            :picker-options="{
                              start: '00:00',
                              step: '00:15',
                              end: '23:45'
                            }">
                          </el-time-select> -->
                        <span>{{ form.businessTime }}</span>
                </el-form-item>
                <el-form-item label="商家类型：">
                     <el-select v-model="form.storeType" style="width: 200px;" :disabled="form.actStat!=0">
                          <el-option :label="item.text" :value="item.value"
                                     v-for="item in typeList"></el-option>
                     </el-select>
                </el-form-item>
                <el-form-item label="商家分类：">
                    <!--  <el-select v-model="form.businessClass" style="width: 200px;"  @change="selectSort2()"
                           placeholder="一级分类">
                        <el-option :label="item.classifyName" :value="item.classifyId"
                                   v-for="item in sortList"></el-option>
                    </el-select>
                    <el-select v-model="form.businessSubclass" style="width: 200px;" placeholder="二级分类" >
                        <el-option :label="item.classifyName" :value="item.classifyId"
                                   v-for="item in secondList"></el-option>
                    </el-select> -->
                    <span>{{ form.classifyName }} - {{ form.subClassifyName }}</span>
                </el-form-item>
                
                <el-form-item label="商家简介：">
                     <el-input style="width: 300px;" v-model="form.introduction"  type="textarea" :rows="5" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="平台拒绝理由：" v-if="form.applyStat==1||form.applyStat==2||form.applyStat==3||form.applyStat==4">
                     <el-input style="width: 300px;" v-model="refuseReason" ></el-input>
                </el-form-item>
                <el-form-item label="平台审核时间：" v-if="form.finishTime">
                     <span>{{ form.finishTime }}</span>
                </el-form-item>
                <el-form-item label="易宝拒绝理由：" v-if="form.yeepayRefuseReason">
                     <span>{{ form.yeepayRefuseReason }}</span>
                </el-form-item>
                <el-form-item label="易宝审核时间：" v-if="form.yeepayApproveTime">
                     <span>{{ form.yeepayApproveTime }}</span>
                </el-form-item>
                <el-form-item label=""  v-if="form.applyStat==1||form.applyStat==2">
                   <el-button type="success" :loading="loading" @click="audit('通过')">通过</el-button> 
                   <el-button type="danger" :loading="loading" @click="audit('拒绝')">拒绝</el-button> 

                </el-form-item>
                 
            </el-form>
            <el-form  label-width="100px" class="demo-ruleForm" style="display:inline-block;;max-width:600px" :model="form" >
                <el-form-item label="银行卡：">
                     <div style="display: inline-block;margin-right: 50px;">
                         <div>
                             银行卡号&nbsp;&nbsp;&nbsp;&nbsp;{{ yibaoInfo.bankAccountNumber }}
                         </div>
                         <div>
                             账户类型&nbsp;&nbsp;&nbsp;&nbsp;个人账户
                         </div>
                         <div>
                             开户地点&nbsp;&nbsp;&nbsp;&nbsp;{{ yibaoInfo.bankCardProvince }} {{ yibaoInfo.bankCardCity }} {{ yibaoInfo.accountName }}
                         </div>
                     </div>
                     <div style="display: inline-block;vertical-align: top">
                         <div>
                             开户名&nbsp;&nbsp;&nbsp;&nbsp;{{ yibaoInfo.accountName }}
                         </div>
                         <div>
                             开户行&nbsp;&nbsp;&nbsp;&nbsp;{{ yibaoInfo.bankName }}
                         </div>
                     </div>
                </el-form-item>
                <el-form-item label="认证图片：">
                    <div style="display:inline-block;text-align: center">
                       <div>
                           <img :src="qualificateImgMap.PERSON_PHOTO" alt=""  class="img-preview" @click="previewIdCard(qualificateImgMap.PERSON_PHOTO,0)" style="margin-right: 10px;" > 
                        </div> 
                        （手持身份证正面）
                    </div>      
                    <div style="display:inline-block;text-align: center">
                        <div>
                           <img :src="qualificateImgMap.ID_CARD_FRONT" alt=""  class="img-preview" @click="previewIdCard(qualificateImgMap.ID_CARD_FRONT,1)" style="margin-right: 10px;" > 
                        </div> 
                      （身份证正面） 
                    </div>
                    <div style="display:inline-block;text-align: center">
                        <div>
                           <img :src="qualificateImgMap.ID_CARD_BACK" alt=""  class="img-preview" @click="previewIdCard(qualificateImgMap.ID_CARD_BACK,2)" style="margin-right: 10px;" > 
                        </div> 
                      （身份证反面） 
                    </div>
                    <div style="display:inline-block;text-align: center">
                        <div>
                           <img :src="qualificateImgMap.BANK_CARD_FRONT" alt=""  class="img-preview" @click="previewIdCard(qualificateImgMap.BANK_CARD_FRONT,3)" style="margin-right: 10px;" > 
                        </div> 
                      （银行卡正面） 
                    </div>
                    <br>
                    <div style="width: 115px;text-align: center">
                        <div style="margin-left: 10px;">
                           <img :src="qualificateImgMap.businessLicense" alt=""  class="img-preview" @click="previewIdCard(qualificateImgMap.businessLicense,4)" style="margin-right: 10px;" > 
                        </div> 
                        （营业执照） 
                    </div>
                     
                </el-form-item>
                <el-form-item label="商家封面图：">
                  <!-- <div style="display: inline-block;text-align: center">
                       <we-ui-uploads :images="form.storeImg"
                                   :maxCount="1"
                                   :maxSize="1024*1024"
                                   @uploading="uploading"></we-ui-uploads>  
                                   （必传） 
                 </div> -->
                 <div style="margin-left: 10px;">
                   <img :src="form.storeImg" alt=""  class="img-preview" @click="previewImage(form.storeImg)" style="margin-right: 10px;" > 
                </div>           
                </el-form-item>
                <el-form-item label="商家简介图：">
                    <!-- <we-ui-uploads :images="form.storeImgList"
                                   :maxCount="9"
                                   :maxSize="1024*1024"
                                   :isSort="true"
                                   @uploading="uploading2"></we-ui-uploads>
                    （最多上传9张） -->
                    <div style="margin-left: 10px;">
                        <img :src="item" alt=""  class="img-preview" @click="previewImage(item)" style="margin-right: 10px;" v-for="item in form.storeImgList"> 
                    </div>
                    
                </el-form-item>
            </el-form>

        </div>
        
          <el-dialog title="激活" v-model="dialogVisible" size="tiny" style="min-width: 400px">
              <el-form label-width="110px">
                  <el-form-item label="联系人：">
                        <el-input style="width:150px;" v-model="contact"></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话：">
                        <el-input style="width:150px;" v-model="contactNum" :maxlength="11"></el-input>
                        <br>
                        <span style="color: red;font-size:15px;">联系方式为商家后台账号,请谨慎填写</span>
                  </el-form-item>
                  <el-form-item label="验证码:">
                        <el-input v-model="msgCode" :maxlength="6"  style="width: 130px;"></el-input> 
                        <el-button  id="code" @click="getcode()" :disabled="cantclick == true" size="small" style="display: inline-block;height:36px;">验证码</el-button> 
                    </el-form-item>           
                  <el-form-item label="绑定用户ID：">
                        <el-input style="width:150px;" v-model="id"></el-input>
                        <el-button type="primary" @click="find()" style="margin-left: 20px;" :disabled="!id">查询</el-button>
                  </el-form-item>             
                  <el-form-item label="用户名：" >
                        <span>{{userName}}</span>
                  </el-form-item>
            </el-form>
            <div style="text-align: center"><span style="color: red;font-size:15px;margin-left: 

5px;">*绑定激活后无法修改，请核对无误后再操作</span></div>
            
             <br>
             <div style="text-align: center">
                 <el-button type="primary" @click="submit" :disabled="!userName|| !contact || !contactNum || !msgCode" :loading="loading">保 存
                 </el-button>
             </div>
             
        </el-dialog>   

        <div class="weui-gallery" style="display: block;z-index: 9999;" v-show="img.is_preview" >
            <span class="weui-gallery__img" :style="{backgroundImage:img.preview_url,transform:img.transform}" @click="hidePreview"></span>
            <div class="pre_img" v-if="img.preview_images.length>1" @click="preImg()">
                 <img src="../../assets/images/left.png" height="50" width="50">
             </div>
             <div class="next_img" v-if="img.preview_images.length>1" @click="nextImg()">
                 <img src="../../assets/images/right.png" height="50" width="50">
             </div>
            <div class="weui-gallery__opr white_pointer">
                <div  class="weui-gallery__del" @click.prevent="rotate()">
                    <img src="../../assets/images/xuanzhuan.png" height="25" width="25">
                    <span class="weui-span_del">旋转</span>
                </div>
            </div>
        </div>
    </div>

</template>
<style>

</style>

<script>
    export default {
        data() {
            return {
                loading: false,
                form: {
                    storeId:'',
                    storeName:'',
                    storePhone:'',
                    storeAddress:'',
                    businessTime:'',
                    businessClass:'',
                    businessSubclass:'',
                    introduction:'',
                    businessLicense:'',
                    idcardFront: [],
                    idcardBack: [],
                    storeImgList:[],
                    storeImg:[],
                    storeType:'1',
                    actStat:0

                },
                sortList: [],
                secondList: [],
                startTime:'',
                typeList:[{text:'物流商超',value:'1'},{text:'服务行业',value:'2'},{text:'酒店',value:'3'}],
                endTime:'',
                userName:'',
                dialogVisible:false,
                id:'',
                show:'',
                storeImgList:[],
                contactNum:'',
                contact:'',
                cantclick:false,
                msgCode:'',
                img: {
                    is_preview: false,
                    preview_url: '',
                    image_index: null,
                    preview_images: [],
                    transform:''
                },
                yibaoInfo:{

                },
                qualificateImgMap:{

                },
                refuseReason:''
            }
        },
        created(){
            this.fetchData()
        },
        activated(){
            //  if (sessionStorage.getItem('address')!=null) {
            //     let info=JSON.parse(sessionStorage.getItem('address'))
            //     this.form.storeAddress=decodeURI(info.storeAddress)
            //     this.form.areaNum=info.areaNum
            //     this.form.storeAccu=info.storeDime
            //     this.form.storeDime=info.storeAccu
            //     sessionStorage.removeItem('address')
            // }else if (sessionStorage.getItem('keep')==1) {
            //    sessionStorage.removeItem('keep')
            // }else{
            //     this.loading=false
            //     this.fetchData()
            // }
           
            
        },
        methods: {
            fetchData(){
                this.dataApi.ajax('singleStoreApplyActivation', {applyId: this.$route.params.id}, res => {
                    if (res.responseType === 'S') {
                         this.form=res.storeApplyActivationDto
                         // this.form.storeImg=[this.form.storeImg]
                         this.form.storeImgList=[]
                         this.storeImgList=generateArr(res.storeImgList)
                         for (var i = this.storeImgList.length - 1; i >= 0; i--) {
                            this.form.storeImgList.push(this.storeImgList[i].imgUrl)
                         }
                         if (this.form.businessTime!='') {
                            this.startTime=this.form.businessTime.split('-')[0]
                            this.endTime=this.form.businessTime.split('-')[1] 
                         }
                         
                         this.show=true
 
                         this.yibaoInfo=res.storeLedgerUserDto
                         this.qualificateImgMap=res.qualificateImgMap
                         this.qualificateImgMap.businessLicense=this.form.businessLicense
                         this.refuseReason=this.form.refuseReason

                    }
                });
            },
            submitForm(){
                if (!this.form.storeName) {
                   this.showMsg('请输入商家名称','warning')
                   return;
                } 
                // if (!this.form.storePhone) {
                //    this.showMsg('请输入门店电话','warning')
                //    return;
                // }
                 if (!this.form.storeAddress) {
                   this.showMsg('请选取门店地址','warning')
                   return;
                }
                 // if (!this.startTime|| !this.endTime) {
                 //   this.showMsg('请输入营业时间','warning')
                 //   return;
                 // }
                if (!this.form.businessClass|| !this.form.businessSubclass) {
                   this.showMsg('请选择分类','warning')
                   return;
                 }
                 // if (!this.form.introduction) {
                 //   this.showMsg('商家简介','warning')
                 //   return;
                 // }
                if (this.form.businessLicense.length==0) {
                    this.showMsg('请输入请上传营业执照','warning')
                    return false;
                }
                 if (this.form.storeImg.length==0) {
                    this.showMsg('请上传商家封面图片','warning')
                    return false;
                }
                let data = generateObj(this.form)
                data.businessLicense=data.businessLicense.toString()
                data.storeImg=data.storeImg.toString()
                var storeImgList=[]
                for (var i = data.storeImgList.length - 1; i >= 0; i--) {  
                    for (var j = this.storeImgList.length - 1; j >= 0; j--) { 
                        if (this.storeImgList[j].imgUrl==data.storeImgList[i]) {
                             storeImgList.push(this.storeImgList[j])
                             break;
                        }
                    }     
                }
                data.storeImgList=storeImgList.reverse()
                if (this.startTime&!this.endTime) {
                    data.businessTime=this.startTime+'-'
                }else if (this.endTime&!this.startTime) {
                    data.businessTime='-'+this.endTime 
                }else if (this.startTime&this.endTime) {
                    data.businessTime=this.startTime+'-'+this.endTime 
                }else{
                    data.businessTime=''
                }
                this.loading=true
                 this.dataApi.ajax('editStoreInfo', data, res => {
                    if (res.responseType === 'S') {
                        this.showMsg('保存成功')
                        this.loading=false
                        this.$router.push('/merchant/merchant_list')
                    }
                  });
                
            },
            selectSort(){
                this.dataApi.ajax('selectStoreClassify', {parentId:0}, res => {
                    if (res.responseType === 'S') {
                       this.sortList = res.dtos
                    }
                });

            },
            selectSort2(){
                if (this.show) {
                    this.form.businessSubclass= this.form.businessSubclass
                    this.show=false
                }else{
                    this.form.businessSubclass ='' 
                }
                this.dataApi.ajax('selectStoreClassify', {parentId: this.form.businessClass}, res => {
                    //console.log(res)
                    if (res.responseType === 'S') {
                        this.secondList = res.dtos
                    }
                });
                

            },
            uploading(f) {

                 this.loading=true
                 this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
                        //console.log(res)
                        if (res.responseType == 'S') {
                            f.images.splice(f.index,1,res.filePath)
                            this.loading=false
                        }
                 });
                
            },
             uploading2(f) {
                 this.loading=true
                 this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
                        //console.log(res)
                        if (res.responseType == 'S') {
                            f.images.splice(f.index,1,res.filePath)
                            this.storeImgList.push(
                            {
                                imgHeight:res.height,
                                imgUrl:res.filePath,
                                imgWidth:res.width
                            })
                            this.loading=false
                        }
                 });
                
            },
            selectAddress(){
                this.$router.push('/merchant/map')
                sessionStorage.setItem('keep','1')
            },
            activate(){
                this.dialogVisible=true
            },
            find(){
               this.dataApi.ajax('singleUser', {userId: this.id}, res => {
                    if (res.responseType === 'S') {
                         this.userName=res.userName
                    }
                });
            },
            submit(){
                 if (!this.form.storeName) {
                   this.showMsg('请输入商家名称','warning')
                   return;
                } 
                if (!this.form.storePhone) {
                   this.showMsg('请输入门店电话','warning')
                   return;
                }
                 if (!this.form.storeAddress) {
                   this.showMsg('请选取门店地址','warning')
                   return;
                }
                 if (!this.startTime|| !this.endTime) {
                   this.showMsg('请输入营业时间','warning')
                   return;
                 }
                if (!this.form.businessClass|| !this.form.businessSubclass) {
                   this.showMsg('请选择分类','warning')
                   return;
                 }
                 if (!this.form.introduction) {
                   this.showMsg('商家简介','warning')
                   return;
                 }
                if (this.form.businessLicense.length==0) {
                    this.showMsg('请输入请上传营业执照','warning')
                    return false;
                }
                if (this.form.idcardFront.length==0) {
                    this.showMsg('请上传身份证正面照','warning')
                    return false;
                }
                if (this.form.idcardBack.length==0) {
                     this.showMsg('请上传身份证反面照','warning')
                    return false;
                }
                 if (this.form.storeImg.length==0) {
                    this.showMsg('请上传商家封面图片','warning')
                    return false;
                }
                let data = generateObj(this.form)
                data.userId=this.id
                data.contact=this.contact
                data.contactNum=this.contactNum
                data.msgCode=this.msgCode
                data.businessLicense=data.businessLicense.toString()
                data.idcardFront=data.idcardFront.toString()
                data.idcardBack=data.idcardBack.toString()
                data.storeImg=data.storeImg.toString()
                var storeImgList=[]
                for (var i = data.storeImgList.length - 1; i >= 0; i--) {  
                    for (var j = this.storeImgList.length - 1; j >= 0; j--) { 
                        if (this.storeImgList[j].imgUrl==data.storeImgList[i]) {
                             storeImgList.push(this.storeImgList[j])
                             break;
                        }
                    }     
                }
                data.storeImgList=storeImgList.reverse()
                data.businessTime=this.startTime+'-'+this.endTime
                this.loading=true
                this.dataApi.ajax('activateStoreInfo', data, res => {
                    if (res.responseType === 'S') {
                        this.showMsg('激活成功')
                         this.dialogVisible=false
                        this.$router.push('/merchant/merchant_list')
                    }
                    this.loading=false
                  }); 
            },
             findSort(type){
                    for (var i = this.typeList.length - 1; i >= 0; i--) {
                        if (type==this.typeList[i].value) {

                            return this.typeList[i].text
                        }
                    }
            },
            getcode(){
                if (!this.contactNum) {
                     this.showMsg('请输入手机号','warning')
                    return;
                }
                var _this=this
                var data={
                        phone:this.contactNum,
                        yzm:this.contactNum
                 }
                this.dataApi.ajax('sendActStoreMsg',data, res => {
                    if (res.responseType === 'S') {
                         
                         var i = 60;
                            var Code=document.getElementById("code");
                            var timer = setInterval(function(){
                                if(i== 0){
                                    Code.innerText="验证码"
                                    // Code.style.backgroundColor='#0AC0EF';
                                    // Code.style.color='white'
                                    clearInterval(timer)
                                    _this.cantclick=false
                                   
                                }else{
                                   Code.innerText=Math.floor(i)+'秒';
                                    --i;
                                    _this.cantclick=true;
                                }
                            },1000);
                    } 
               })
                
                    

            },
             previewImage(src) {
                this.img.is_preview = true;
                this.img.preview_url = `url(${src})`;
                this.img.preview_images = [src];
                this.img.transform = '';
            },
            previewIdCard(src,index){
                var arr=[]
                for (var key in this.qualificateImgMap) {
                   arr[0]=this.qualificateImgMap['PERSON_PHOTO']
                   arr[1]=this.qualificateImgMap['ID_CARD_FRONT']
                   arr[2]=this.qualificateImgMap['ID_CARD_BACK']
                   arr[3]=this.qualificateImgMap['BANK_CARD_FRONT']
                   arr[4]=this.qualificateImgMap['businessLicense']
                }
                this.img.is_preview = true;
                this.img.preview_url = `url(${src})`;
                this.img.preview_images = arr;
                this.img.transform = '';
                this.img.image_index=index

            },
            hidePreview() {
                this.img.is_preview = false;
                this.img.preview_url = null;
                this.img.image_index = null;
                this.img.preview_images = [];
                this.img.transform = '';
            },
             rotate(){
              if (this.img.transform=='') {
                  this.img.transform='rotate(90deg)'
              }else if (this.img.transform=='rotate(90deg)') {
                  this.img.transform='rotate(180deg)'
              }else if (this.img.transform=='rotate(180deg)') {
                  this.img.transform='rotate(270deg)'
              }else if (this.img.transform=='rotate(270deg)') {
                  this.img.transform=''
              }
            },
            nextImg(){
                this.img.transform='';
                if (this.img.image_index+1==this.img.preview_images.length) {
                    this.img.preview_url = `url(${this.img.preview_images[0]})`;
                    this.img.image_index = 0;
                }else{
                    this.img.preview_url = `url(${this.img.preview_images[this.img.image_index+1]})`;
                    this.img.image_index = this.img.image_index+1;

                }
            },
            preImg(){
                this.img.transform='';
                if (this.img.image_index==0) {
                    this.img.preview_url = `url(${this.img.preview_images[this.img.preview_images.length-1]})`;
                    this.img.image_index = this.img.preview_images.length-1;
                }else{
                    this.img.preview_url = `url(${this.img.preview_images[this.img.image_index-1]})`;
                    this.img.image_index = this.img.image_index-1;

                }
            },
            audit(type){
               var state=''
                if (type=='通过') {
                  state=2
                }else{
                  if (this.refuseReason=='') {
                    this.showMsg('请填写拒绝理由','warning');
                    return
                  }
                  state=1
                }
                 this.$confirm('确定'+type+'?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {

                     var data={
                       applyId:this.$route.params.id,
                       applyStat:state,
                       refuseReason:this.refuseReason
                     }
                      this.dataApi.ajax('approveStoreApplyActivation',data, res => {
                            if (res.responseType === 'S') {
                                 this.showMsg(type+'成功');
                                 this.goBack()
                            }
                        });
                  }).catch(() => {
          
                  });
            }
        }
    }
</script>
